<template>
<div class="home" v-if="dataShow">
  <div class="popWindow" v-if="lotteryPop!=0" @click="lotteryPop=0;sharePop=0">
    <div class="share" v-if="sharePop!=0">
      点击右上角<br/>
      分享给好友
    </div>
    <div class="popBox" @click.stop>
      <h2>你的本轮抽奖次数已用完</h2>
      <h3>分享好友参与增加抽奖次数</h3>
      <p>每邀请一名好友注册，即可获得一次抽奖机会，邀请好友越多，抽奖次数越多。</p>
      <button class="btnStyle btn1" @click="sharePop=1">点击分享</button>
    </div>
  </div>
  <div class="popWindow" v-if="homePop!=0" @click="homePopEdit(0)">
    <login v-if="homePop==1"></login>
    <win-pop v-if="homePop==2" :winState="winState" :winInfo="winInfo"></win-pop>
    <win-list v-if="homePop==3"></win-list>
    <addres v-if="homePop==4"></addres>
  </div>
  <header>
    <router-link tag="div" class="explain" :to="{name:'explain'}">活动说明</router-link>
  </header>
  <div class="bg">
    <h2>本次抽奖还剩</h2>
    <dl class="time">
      <dd>
        <em>{{endTime.d>=10?endTime.d:'0'+endTime.d}}</em>
        <p>天</p>
      </dd>
      <dd>
        <em>{{endTime.h>=10?endTime.h:'0'+endTime.h}}</em>
        <p>时</p>
      </dd>
      <dd>
        <em>{{endTime.m>=10?endTime.m:'0'+endTime.m}}</em>
        <p>分</p>
      </dd>
      <dd>
        <em>{{endTime.s>=10?endTime.s:'0'+endTime.s}}</em>
        <p>秒</p>
      </dd>
    </dl>
    <div class="num">目前已有{{dataShow.Num}}人参与抽奖</div>
    <div class="dial">
      <dl class="list">
        <dd v-for="(item,idx) in dataShow.prizeList" :class="{'curr':dialInow%8==idx}" :style="{transform:'translateX(50%) rotate('+45*idx+'deg)'}"><p v-html="item"></p></dd>
      </dl>
      <div class="pointer" @click="lotteryFn">
        <em>点击抽奖</em>
        <p v-if="lotteryNum!==''">剩余{{lotteryNum}}次</p>
        <p v-else>请登录</p>
      </div>
    </div>
    <button class="btnStyle myWinList" @click="homePopEdit(3)"></button>
    <h3>中奖信息</h3>
    <div class="winList">
      <div class="box">
        <ul :style="{'margin-top':-winListTop+'px',transition:winListTop==0?'':winListSpeed+'s linear'}" ref="winList">
          <li v-for="item in dataShow.Awardsrecords">{{item.phonemun}}：抽到{{item.adardlevel}}</li>
        </ul>
        <ul>
          <li v-for="item in dataShow.Awardsrecords">{{item.phonemun}}：抽到{{item.adardlevel}}</li>
        </ul>
      </div>
    </div>
    <h3>{{dataShow.Prizeinfo.title}}</h3>
    <div class="prizeList" v-html="dataShow.Prizeinfo.content">
      <p>以下为抽取的礼品详细介绍，最终获得礼品以该期抽取礼品的介绍为准。</p>
      <p>华为手机一部是指华为荣耀20X 64G版本手机一部，请参阅华为手机官网信息；</p>
      <p>护理膜一盒是指花瑾堂千金方·护理膜一盒，全国统一售价598元一盒。</p>
      <p>时间<br/>
      2019年10月10日20:00</p>
    </div>
    <footer>
      <img src="../assets/img/qrcode.jpg">
      <p>关注花瑾堂官方微信公众号<br/>
        了解更多花粉节的优惠活动</p>
    </footer>
  </div>
</div>
</template>

<script>
import {mapState,mapMutations} from 'vuex';
export default{
  data:()=>{
    return{
      prizeList:['小米电视<br/>1台','豆浆机<br/>1台','平板电脑<br/>1台','护理膜<br/>1盒','谢谢参与','代金券<br/>200元','华为手机<br/>1部','护花伴侣<br/>1盒'],
      dialInow:0,
      dataShow:'',
      lotteryNum:'',
      lotteryPop:0,
      sharePop:0,
      pop:1,
      speed:1000,
      rotateNum:'',
      rotateNumCopy:8*10,
      winState:'',
      winInfo:'',
      winListTop:0,
      winListSpeed:0,
      endTime:{
        d:0,
        h:0,
        m:0,
        s:0
      }
    }
  },
  mounted(){
    this.dataShowFn();
    this.lotteryNumFn();
    if(localStorage.getItem('phone')){
      this.$router.push({name:'home',query:{phone:localStorage.getItem('phone')}});
    }
  },
  watch:{
    'homePop'(to){
      if(to==0){
        this.dialInow=0;
        this.speed=1000;
        this.lotteryNumFn();
      }
    }
  },
  computed:{
    ...mapState(['homePop'])
  },
  methods:{
    ...mapMutations(['homePopEdit']),
    endTimeFn(date){
      let endDate=new Date(date);
      let nowDate=new Date();
      let totalSeconds = parseInt((endDate - nowDate) / 1000);
      let days=Math.floor(totalSeconds / (60 * 60 * 24));
      let modulo = totalSeconds % (60 * 60 * 24);
      let hours = Math.floor(modulo / (60 * 60));
      modulo = modulo % (60 * 60);
      let minutes = Math.floor(modulo / 60);
      let seconds = modulo % 60;
      this.endTime.d=days>=0?days:0;
      this.endTime.h=hours>=0?hours:0;
      this.endTime.m=minutes>=0?minutes:0;
      this.endTime.s=seconds>=0?seconds:0;
    },
    lotteryFn(){
      /*if(parseInt(this.lotteryNum)===0){
        this.lotteryPop=1;
        return false;
      }*/
      if(this.dialInow!=0){
        return false;
      }
      this.lotteryNumFn();
      this.http(this.api.luckDraw,{
        token:localStorage.getItem('token')
      }).then(res=>{
        switch(parseInt(res.data.code,10)){
          case 0:
            this.rotateNum=this.rotateNumCopy+res.data.status;
            this.lotteryMoveFn();
            if(res.data.content=='谢谢参与'||res.data.content=='很遗憾'){
              this.winState=0;
            }else{
              this.winState=1;
              this.winInfo={
                adardlevel:res.data.adardlevel,
                content:res.data.content
              };
            }
            break;
          default:
            Toast(res.data.msg);
        }
      });
    },
    lotteryMoveFn(){
      if(this.dialInow<10){
        this.speed*=0.75;
      }
      if(this.dialInow>this.rotateNum-10){
        this.speed/=0.75;
      }
      setTimeout(()=>{
        this.dialInow++;
        if(this.dialInow!=this.rotateNum){
          this.lotteryMoveFn();
        }else{
          setTimeout(()=>{
            this.homePopEdit(2);
            this.lotteryNumFn();
          },1000);
        }
      },this.speed);
    },
    dataShowFn(){
      this.http(this.api.getHomePage).then(res=>{
        switch(parseInt(res.data.code,10)){
          case 0:
            this.dataShow=res.data;
            setInterval(()=>{
              this.endTimeFn(this.dataShow.Endtime);
            },1000);
            this.$nextTick(()=>{
              this.winListSpeed=this.dataShow.Awardsrecords.length/2*0.5;
              this.winListTop=this.$refs.winList.offsetHeight;
              setInterval(()=>{
                this.winListTop=0;
                setTimeout(()=>{
                  this.winListTop=this.$refs.winList.offsetHeight;
                },50);
              },this.winListSpeed*1000);
            });
            break;
          default:
            Toast(res.data.msg);
        }
      });
    },
    lotteryNumFn(){
      this.http(this.api.getAwardtimes,{
        token:localStorage.getItem('token')
      }).then(res=>{
        switch(parseInt(res.data.code,10)){
          case 0:
            this.lotteryNum=res.data.Awardtimes;
            break;
          case -1:
            localStorage.removeItem('token');
        }
      });
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
.home{
  .share{
    position:absolute;
    top:20px;
    right:20px;
    display:flex;
    font-size:16px;
    color:#FFF;
    align-items:flex-end;
    &:after{
      content:'';
      width:80px;
      height:60px;
      margin:0 0 20px 20px;
      background:url('~@img/jiantou.png');
      background-size:100% 100%;
    }
  }
  .popBox{
    background-color:#FFF;
    border-radius:8px;
    width:280px;
    padding:30px;
    box-sizing:border-box;
    h2{
      font-size:20px;
      color:#898989;
    }
    h3{
      color:#F77220;
    }
    p{
      margin:23px 0;
      font-size:10px;
    }
    .btn1{
      width:100%;
      height:38px;
    }
  }
  header{
    height:160px;
    background:url('~@img/header.png');
    background-size:100% 100%;
    position:relative;
    .explain{
      font-size:12px;
      position:absolute;
      top:20px;
      right:20px;
      color:#FFF;
    }
  }
  .bg{
    background:url('~@img/bg.png') no-repeat #ffe4aa;
    background-size:100% auto;
    h2{
      font-size:16px;
      color:#FFF;
    }
    .time{
      display:flex;
      justify-content:center;
      margin-top:8px;
      dd{
        width:48px;
        height:48px;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color:#F5A623;
        background-color:#FFF2F2;
        margin:0 5px;
        border-radius:4px;
        box-shadow:0 5px 4px 0 rgba(#fff,0.77) inset,0 -3px 10px 0 rgba(#FFCECE,0.75) inset,0 2px 4px rgba(#FF1515,0.14);
        em{
          font-size:16px;
        }
        p{
          font-size:10px;
        }
      }
    }
    .num{
      margin:18px auto 0;
      width:240px;
      line-height:35px;
      background:#F5A623;
      border-radius: 17px;
      font-size:12px;
      color:#FFF;
    }
    .dial{
      position:relative;
      margin:10px auto 0;
      background:url('~@img/dial.png');
      background-size:100% 100%;
      width:(664px/2);
      height:(652px/2);
      display:flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow:hidden;
      .list{
        position:relative;
        width:(510px/2);
        height:(510px/2);
        margin-left:-5px;
        border-radius:50%;
        overflow:hidden;
        &:before{
          content:'';
          position:absolute;
          left:0;
          top:0;
          z-index:2;
          width:100%;
          height:100%;
          border-radius:50%;
          box-shadow:0 0 50px #f9bd4f inset;
        }
        dd{
          position:absolute;
          margin:auto;
          height:50%;
          width:(520px/2/2);
          left:0;
          right:0;
          top:0;
          font-size:12px;
          transform-origin:left bottom;
          overflow:hidden;
          &:before{
            width:100%;
            height:100%;
            content:'';
            background-color:#FFFCDF;
            display:block;
            transform:translateX(-100%) rotate((360deg/8));
            transform-origin: right bottom;
            box-shadow:0 0 30px #fef8b8 inset;
          }
          p{
            position:absolute;
            top:24px;
            left:0;
            right:46%;
            text-align:center;
            color:$c01;
            font-size:12px;
          }
          @for $i from 0 to 9{
            &:nth-child(#{$i+1}){
              p{
                transform:rotate(-(45deg*$i));
              }
            }
          }
          &.curr{
            &:before{
              background-color:#FF9F38;
              box-shadow:0 0 30px #fdc138 inset;
            }
            p{
              color:#FFF;
            }
          }
        }
      }
      .pointer{
        width:110px;
        height:110px;
        position:absolute;
        z-index:3;
        left:0;
        top:0;
        right:0;
        bottom:0;
        margin:auto;
        transform: translateX(-5px);
        background:url('~@img/pointer.png');
        background-size:100% 100%;
        color:#FFF;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor:pointer;
        em{
          font-size:16px;
          text-shadow:1px 1px 0 rgba(#FF4444,0.5);
          margin-top:5px;
        }
        p{
          font-size:12px;
        }
      }
    }
    .myWinList{
      margin:37px auto 0;
      background:url('~@img/btn1.png');
      background-size:100% 100%;
      width:(700px/2);
      height:(144px/2);
    }
    h3{
      color:#C56000;
      font-size:16px;
      margin-top:14px;
      &:before,&:after{
        content:"";
        display:inline-block;
        width:40px;
        height:2px;
        margin:0 10px;
        vertical-align:5px;
      }
      &:before{
        background-image: linear-gradient(90deg, rgba(238,238,238,0.00) 0%, #C56000 100%);
      }
      &:after{
        background-image: linear-gradient(-90deg, rgba(238,238,238,0.00) 0%, #C56000 100%);
      }
    }
    .winList{
      margin:5px auto;
      width:350px;
      height:106px;
      background:url('~@img/winListBg.png');
      background-size:100% 100%;
      display:flex;
      flex-direction:column;
      .box{
        flex:1;
        margin:10px 33px 13px;
        overflow:hidden;
        ul{
          display:flex;
          flex-wrap: wrap;
          li{
            font-size:10px;
            line-height:24px;
            color:#FFF;
            text-align:left;
          }
        }
      }
    }
    .prizeList{
      margin:24px auto 0;
      width:340px;
      background-color:#FFF;
      color:#7D7D7D;
      font-size:14px;
      padding:24px 24px 0;
      box-sizing: border-box;
      border-radius:8px;
      /deep/ p{
        padding-bottom:24px;
        text-align:left;
      }
    }
    footer{
      padding-bottom:50px;
      margin-top:25px;
      font-size:10px;
      img{
        width:110px;
        height:110px;
        margin:auto;
      }
      p{
        padding-top:10px;
      }
    }
  }
}
</style>
